<template>
  <div id="app">
    <nav-bar title="搜索" left-arrow @clickLeft="$goPageBack('product/list')" />

    <van-search 
      placeholder="请输入搜索关键字" 
      show-action 
      autofocus
      class="search-warp"
      v-model="keyword" 
      @search="onSearch(keyword)"
      @clear="clear"
    >
      <div slot="action" @click="onSearch(keyword)" class="search-btn">搜索</div>
    </van-search>
    <div class="hot-search" v-show="!inSearch">
        <h5>热门搜索</h5>
        <van-row tag="ul" class="hot-list">
          <van-col 
            tag="li" 
            class="item" 
            v-for="(hot, key) in hotList"  
            :key="key" 
            @click="onSearch(hot)"
          >{{hot}}</van-col>
        </van-row>
    </div>
    <prod-list v-show="inSearch" :params="params" no_data_text="未找到符合条件的产品<br/>请修改查询条件后再试" ref="productList" />

    <slogan/>
  </div>
</template>
<script>
  import { Search,Row,Col } from "vant";
  import NavBar from "@cmpt/header/navbar"
  import { getHotWord } from '@api/modules/search'
  import ProdList from '@views/product/components/product-list'
  import Slogan from '@cmpt/slogan'
  export default {
    name: "searchindex",
    components:{
      [Search.name]: Search,
      [Row.name]: Row,
      [Col.name]: Col,
      [ProdList.name]: ProdList,
      [Slogan.name]: Slogan,
      NavBar
    },
    data(){
      return {
        keyword: '',
        params: {
          keyword: null
        },
        inSearch: false,
        hotList: []
      }
    },
    watch: {
      keyword(nw) {
        this.inSearch = true
        this.params.keyword = nw
        this.$mergePageParams({
          keyword: nw
        })
      }
    },
    created() {
      this.getHotWord()
      
      // 设置微信、app分享
      this.$set_share({
        title: `优采产品搜索`,
      })
    },
    methods:{
      onSearch(word) {
        if(this.keyword == word){
          this.$refs.productList.reLoad()
        }
        this.keyword = word
      },
      clear() {
        if(!this.params.keyword){
          this.inSearch = false
        }
      },
      async getHotWord() {
        getHotWord()
          .then(res => {
            for(let i in res.data){
              this.hotList.push(res.data[i])
            }
          })
        
        if(this.$getUrlParam('keyword')){
          this.keyword = this.$getUrlParam('keyword')
        }
      }
    },
  }
</script>

<style lang="less" scoped>
  @import "~@style_m/basic/utils/index";
   body{
     background-color:@white!important;
   }
   .search-warp{
      padding: 10px 16px;
   }
  .search-btn{
    color: @color-main;
  }
  .hot-search{
    padding:25px 16px 25px 0;
    background-color: @white;
    border-top:1px solid @border-color;
     h5{
      color:@black;
      font-weight: normal;
      margin-left:16px;
      font-size:@font-size-lg;
    }
  }
  .hot-list{
    margin:@size-lg 0 0 6px;
    .item{
      height:30px;
      line-height:30px;
      color:@black;
      text-align: center;
      padding:0 25px;
      margin:0 0 10px 10px;
      background-color:#f8f8f8;
    }
  }
</style>>
